<!DOCTYPE html>
<html>
<head>
	<title>模板列表</title>
    <include file='public/head'>
        <style>
			.layui-legend-size{font-size:14px !important;}
			.layui-nopadding{padding:0 !important;}
			.layui-overflow{overflow:auto;}
			.layui-nomargin{margin: 0 !important;}
			.layui-bottom{border-bottom:1px solid rgb(226, 226, 226);}
			.layui-input{height:30px !important; }
			.layui-form-search-item .layui-inline{margin-bottom: 5px;} 
			.layui-form-search-item label{margin-left: 15px;}
			.layui-table-page {padding: 7px 0px 0px;}
			.layui-field-padding{border-width: 1px;padding:0 0 5px 10px;}
        </style>
</head>
<body>
	<!-- layui-tab开始 -->
	<div class="layui-tab" lay-filter="demo-tab" >
        <!-- 内容开始-->
		 <!-- 搜索栏开始 -->
		<fieldset class="layui-elem-field layui-field-title layui-field-padding">
			<legend class="layui-legend-size">搜索</legend>
			<form class="layui-form table-bar" action="{:cmf_plugin_url('SiteConfig://home_page_config/mblist')}" lay-filter="form-bar">

				<div class="layui-form-search-item">
				    <div class="layui-inline">
					    <select name="type">
					        <option value="100"  <?php if( $search[ 'type' ] == '100' ) echo 'selected'; ?>  >全部</option>
					        <volist name="type" id="vo">
					           <option value="{$key}" <?php if( $key == $search[ 'type' ] ) echo 'selected'; ?> >{$vo}</option>
                            </volist>
					    </select>
					</div>
					<div class="layui-inline">
						<div class="layui-input-inline" style="width: 100px;">
							<input type="text" name="keywords" autocomplete="off" placeholder="请输入关键字..." value="{$search['keywords']|default=''}" class="layui-input">
						</div>
					</div>
					

					<div class="layui-inline">
						<button type="submit" class="layui-btn layui-btn-sm layui-btn-primary " style="font-weight:800;" lay-submit="" lay-filter="demo2"><i class="layui-icon ">&#xe615;</i>搜索</button>
					</div>
				</div>
			</form>
		</fieldset>
		<!-- 搜索栏结束 -->

		<!-- 内容开始 -->
		<form  class="layui-form" action="">

			<!-- 数据表格开始 -->
			<table class="layui-hide" id="article_tab" lay-filter="article_tab"></table>
			<!-- 数据表格结束 -->

			<!-- 表头部工具开始 -->
			<script type="text/html" id="toolbarDemo">
				<div class="layui-btn-container">
					<button type="button" class="layui-btn layui-btn-xs layui-btn-danger" lay-event="batch_delete">批量删除</button>
					<button type="button" class="layui-btn layui-btn-xs" lay-event="batch_add">添加模板</button>
    				<button type="button" class="layui-btn layui-btn-xs layui-btn-warm" lay-event="batch_refresh" title="刷新"><i class="layui-icon">&#xe669;</i>刷新</button>
				</div>
			</script>
			<!-- 表头部工具结束 -->

			<!--这个是选择框tpl-->
			<script type="text/html" id="show_tpl">
				<input type="checkbox" name="status" value="{d.id}" lay-skin="switch" lay-text="显示|隐藏" lay-filter="show_switch" {eq name="d.switch" value="1"}value{/eq} >
			</script>

			<!-- toolbar - 工具条模板开始 -->
			<script type="text/html" id="action_bar">
				<div class="layui-btn-group">
					<button type="button" class="layui-btn layui-btn-primary layui-btn-xs " lay-event="update">
						<i class="layui-icon">&#xe642;</i>
					</button>
					<button type="button" class="layui-btn layui-btn-primary layui-btn-xs "  lay-event="delete">
						<i class="layui-icon">&#xe640;</i>
					</button>
				</div>
			</script>
			<!-- toolbar - 工具条模板结束 -->
		</form>
		<!-- 内容结束 -->
		<!-- 内容结束-->
	</div>
	<!-- layui-tab结束-->

	<include file='public/scripts'>

	<!-- script开始-->	
	<script>
	;!function(){
		var form = layui.form
			,layer = layui.layer    //弹出层必需
			,layedit = layui.layedit  //富文本必需
			,laydate = layui.laydate  //日期选择必需
			,table = layui.table  //表格必需
			,element = layui.element;  //选项卡	
			
			
	}();

		table = layui.table;
	
        //渲染表格
        table.render({
                defaultToolbar:false,
                elem: '#article_tab'
                ,cellMinWidth: 40 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
				,limit:'{$search["pagesize"]|default="20"}'
                ,url:"{:cmf_plugin_url('SiteConfig://home_page_config/getmblist')}?type={$search['type']}&keywords={$search['keywords']|default=''}"//数据接口
				,toolbar: '#toolbarDemo' //开启表格头部工具栏区域
				,cols: [[
					{type:'checkbox'}
					,{field:'id',  title: 'ID' , width:50}
					,{field:'type_name', title: '类型' , width:90}
					,{field:'name', title: '标题' , width:200}
					,{field:'table_name',title:'表名' , width: 150}
					,{field:'field_map', title:'字段映射'}
					,{field:'cate_url', title:'操作', width: 90,toolbar:'#action_bar'}
                ]]//设置表头
                ,page:true//开启分页
                ,response: {
                  statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                }
				,parseData: function(res){ //res 即为原始返回的数据
					return {
    					"code": res.code, //解析接口状态
    					"msg": res.message, //解析提示文本
    					"count": res.data.total, //解析数据长度
    					"data": res.data.data //解析数据列表
					};
				}
         
 
            });

	//头工具栏
		table.on('toolbar(article_tab)', function(obj){
			var checkStatus = table.checkStatus(obj.config.id);
			switch(obj.event){
				case 'batch_add':
					layer.open({
    					type: 2//基本层类型  0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    					,title: "添加模板"//层的标题
    				    ,shadeClose: false
    					,shade: 0.8//遮罩
    					,area: ['90%', '90%']//宽高
    					,btn:['保存','关闭']//弹框按钮
    					,fixed:false//固定
    					,content: "{:cmf_plugin_url('SiteConfig://home_page_config/addmb')}?type={$search['type']}" //iframe的url
    					,yes:function(index, layero){
    						//调用子页面方法
    						parentInfo = window["layui-layer-iframe" + index].callbackdata(index);
    					}
    					,btn2:function(index, layero){
    					}
					});
				break;
				case 'batch_add_mb':
					var txt = $(this).text();
					layer.open({
    					type: 2//基本层类型  0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    					,title: txt//层的标题
    					,shadeClose: false
    					,shade: 0.8//遮罩
    					,area: ['95%', '95%']//宽高
    					//,btn:['保存','关闭']//弹框按钮
    					,fixed:false//固定
    					,content:"{:cmf_plugin_url('SiteConfig://home_page_config/mblist')}?type={$search['type']}" //iframe的url
    					,yes:function(index, layero){
    						//调用子页面方法
    						parentInfo = window["layui-layer-iframe" + index].callbackdata(index);
    					}
    					,btn2:function(index, layero){
    					}
					});
				break;
				case "batch_refresh":
				    window.location.reload();
				break;
				case 'batch_delete':

					var data = checkStatus.data;
		
					var ids = data.map( ( v , i ) => {
					    
					    return v.id;
					});
			

					//询问框
					layer.confirm('确定要删除选中项吗？', {icon: 3, title:'提示',btn:['删除','取消']}
					, function(index,layero){
						$.ajax({
							url:"{:cmf_plugin_url('SiteConfig://home_page_config/delete')}",
							type:'post',
							data:{id:ids},
							success:function(data){
								let icon = ( data.code == 200 )  ? 1 : 5 ; 
									layer.msg( data.message , { time:1200 , icon:icon },function(){
										window.location.reload();
									});
							},
							error:function(data){
								layer.msg('批量操作失败',{ time:1200 , icon:5 });
								return false;
							}
							})
							
					},function(index){

					});

				break;
			};
			});

		//表格工具栏
		table.on('tool(article_tab)', function(obj){
			var data = obj.data;
			let url = "{:cmf_plugin_url('SiteConfig://home_page_config/editmb')}?id="+data.id;
			if(obj.event === 'update'){
				layer.open({
					type: 2
					,title: '编辑'
					,shadeClose: false
					,shade: 0.8
					,area: ['800px', '600px']
					,btn:['保存','关闭']
					,fixed:false
					,content: url //iframe的url
					,yes:function(index, layero){
						//调用子页面方法
						parentInfo = window["layui-layer-iframe" + index].callbackdata();

					},
					btn2:function(index, layero){
					}
				});
			} else if(obj.event === 'delete'){
				//询问框
				layer.confirm('确定要删除吗？', {icon: 3, title:'提示',btn:['删除','取消']}
				, function(index,layero){
					$.ajax({
						url:"{:cmf_plugin_url('SiteConfig://home_page_config/delete')}",
						type:'post',
						data:{id:obj.data.id},
						success:function(data){
							let icon = ( data.code == 200 )  ? 1 : 5 ; 
							layer.msg( data.message , { time:1200 , icon:icon },function(){
								//window.location.reload();
								obj.del();
							});
						},
						error:function(data){
	
							layer.msg('失败',{ time:1200 , icon:5 });
							return false;
						}
						})
						
				},function(index){

				});
				
			}
			
			
		});

	</script>
	<!-- script结束-->

</body>
</html>